<template>
	<div style="width:100%">
		<el-upload
			class="upload-common"
			:action="uploadUrl"
			:headers="headers"
			:on-change="handleChange"
			:multiple="multiple"
			:before-upload="beforeUpload"
			:file-list="fileList">
			<div slot="file" slot-scope="{file}">
				<span>
					<i class="el-icon-document"></i>
					{{file.name}}
				</span>
				<span class="file-row-icon" v-if="!disabled" style="color: red;" @click="handleRemove(file)">
					<i class="el-icon-delete"></i>
				</span>
				<span class="file-row-icon" v-if="!disabled" @click="handleDownload(file)">
					<i class="el-icon-download"></i>
				</span>
				<span class="file-row-icon" v-if="!disabled" style="color:#13CE66;" @click="handleEdit(file)">
					<i class="el-icon-edit"></i>
				</span>
				<span class="file-row-icon" v-if="!disabled" style="color:#E6A23C;" @click="handlePreview(file)">
					<i class="el-icon-view"></i>
				</span>
			</div>
			<el-button size="small" type="primary">点击上传</el-button>
		</el-upload>
	</div>
</template>
<style>
	.file-row-icon {
		float: right;
		margin-right: 0.625rem;
	}
</style>
<script>
	import axios from 'axios'
	import request from '@/utils/request'
	import {
		getToken
	} from '@/utils/auth'
	export default {
		name: 'commonUpload',
		props: {
			"fileIds" : {
				type : String,
				default: ""
			},
			"fileInfo": {
				type : Object,
				default: {}
			},
			"multiple" : {
				type : Boolean,
				default: false
			}
		},
		data() {

			return {
				headers: {
					'X-Token': getToken()
				},
				uploadUrl: process.env.VUE_APP_BASE_API + "/system/file/upload",
				disabled: false,
				fileList: []
			};
		},
		watch: {
			fileIds: function(oldVal,newVal) {
				 this.getFileList();
			},
			fileInfo: function(oldVal,newVal){

			}
		},
		//页面初始化加载
		mounted() {
			debugger
			this.getFileList();
		},
		methods: {
			handleChange(file, fileList) {
				this.fileList = fileList
				if (file.response && file.response.code == 20000) {
					for(var i = 0 ;  i < this.fileList.length ; i++ ){
						if(file.uid == this.fileList[i].uid){
							this.fileList[i]['fileId'] = file.response.data.fileId;
							this.fileList[i]['info'] = file.response.data;
							debugger
							this.$emit("fileInfo",file.response.data);
						}
					}
				}
			},
			//根据文件Id获取文件列表
			getFileList() {
				debugger
				var params = {
					fileIds: this.fileIds
				}
				request({
					url: '/system/file/query',
					method: 'post',
					data: params
				}).then(response => {

					this.fileList = response.data.map( (value, key, arr)=>{
						value.uid = value.fileId;
						value.name = value.fileName;
					    return value;
					})

					// this.fileList = response.data;
				})
			},

			// 文件刪除
			handleRemove(file) {
				for(var i = 0 ;  i < this.fileList.length ; i++ ){
					if(file.uid == this.fileList[i].uid){
						this.fileList.splice(i,1)
						break;
					}
				}
				this.updateFileIds();
			},

			updateFileIds() {
				let idArr = this.fileList.map( (value, key, arr)=>{
					    return value.fileId;
				})
				this.fileIds = idArr.toString();
			},
			beforeUpload(file){
				if(!this.multiple && this.fileList.length > 1){
					this.$message.warning(`只能上传一个文件`);
					return false;
				}
			},
			//文件下载
			handleDownload(file) {
				var fileId = file.fileId;
				let entity = {
					fileId: fileId,
				}
				axios({
					url: process.env.VUE_APP_BASE_API + "/system/file/download",
					method: 'post',
					data: entity,
					responseType: 'blob'
				}).then(response => {
					this.download(response.data, file)
				})

			},
			// 下载文件
			download(data, row) {
				if (!data) {
					return
				}
				let url = window.URL.createObjectURL(new Blob([data]))
				let link = document.createElement('a')
				link.style.display = 'none'
				link.href = url
				// 获取文件名
				// download 属性定义了下载链接的地址而不是跳转路径
				link.setAttribute('download', row.name)
				document.body.appendChild(link)
				link.click()
			},
			// 在线预览
			handlePreview(file){
				window.open(process.env.VUE_APP_BASE_API + "/system/html/onlyOffice.html?mode=view&fileId=" + file.fileId + "&X-Token=" + getToken(), '_blank')
			},
			// 在线编辑
			handleEdit(file){
				window.open(process.env.VUE_APP_BASE_API + "/system/html/onlyOffice.html?mode=edit&fileId=" + file.fileId + "&X-Token=" + getToken(), '_blank')
			}
		}
	}
</script>
<style>
.upload-common{
	width: 18rem;
}
</style>
